<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('注册人数')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>用户注册</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>柱状图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title: {
                text: '注册用户折线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['注册用户数量']
            },
            grid: {
                x: 40,
                x2: 40,
                y2: 24
            },
            calculable: true,
            xAxis: [
                {
                    data:[]
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '注册人数',
                    type: 'line',
                    data:[],
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
            ]
        };
        var names = []; //时间坐标数组（实际用来盛放X轴坐标值）
        var nums = []; //注册数量数组（实际用来盛放Y坐标值）

        $.ajax({
            type : "post",
            async : true, //
            url : "./chartData",
            data : {},
            dataType : "json", //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].createDate); //挨个取出时间坐标并填入类别数组
                    }
                    for (var i = 0; i < result.length; i++) {
                        nums.push(result[i].count); //挨个取出注册人数并填入数组
                    }
                    lineChart.setOption({ //加载数据图表
                        xAxis : {
                            data : names
                        },
                        series : [ {
                            // 根据名字对应到相应的系列
                            name : '注册人数',
                            data : nums
                        } ]
                    });

                }

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                lineChart.hideLoading();
            }
        })

        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);

        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            title: {
                text: '注册人数柱状图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['注册用户']
            },
            grid: {
                x: 30,
                x2: 40,
                y2: 24
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data:[]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '注册人数',
                    type: 'bar',
                    data: [],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
            ]
        };
        var datas = []; //时间坐标数组（实际用来盛放X轴坐标值）
        var counts = []; //注册数量数组（实际用来盛放Y坐标值）

        $.ajax({
            type : "post",
            async : true, //
            url : "./chartData",
            data : {},
            dataType : "json", //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        datas.push(result[i].createDate); //挨个取出时间坐标并填入类别数组
                    }
                    for (var i = 0; i < result.length; i++) {
                        counts.push(result[i].count); //挨个取出注册人数并填入销量数组
                    }
                    barChart.setOption({ //加载数据图表
                        xAxis : {
                            data : datas
                        },
                        series : [ {
                            data : counts
                        } ]
                    });

                }

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                lineChart.hideLoading();
            }
        })
        barChart.setOption(baroption);
        window.onresize = barChart.resize;

    })
</script>
</body>
</html>